<template>
  <div class="id">
    <div id="card">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>全部商品</el-breadcrumb-item>
        <el-breadcrumb-item v-show="!search">分类</el-breadcrumb-item>
        <el-breadcrumb-item v-show="search">搜索</el-breadcrumb-item>
        <el-breadcrumb-item v-show="search">{{this.search}}</el-breadcrumb-item>
      </el-breadcrumb>
      <!-- 分类模块 -->
      <el-tabs type="card" v-model="$store.state.activeName" @tab-click="handleClick">
        <el-tab-pane label="全部"></el-tab-pane>
        <el-tab-pane :label="item.category_name" v-for="(item, key) in CategoryList" :key="key"></el-tab-pane>
      </el-tabs>
    </div>
    <router-view></router-view>
    <div id="data">
      <div v-show="this.search ==''">
        <ul v-show="$store.state.activeName == 0">
          <li
            v-for="(itme,key) in CategoryListAllData"
            :key="key"
            @click="getDetails(itme.product_id)"
          >
            <img :src="'http://39.100.7.70:81/'+itme.product_picture" alt />
            <p>{{itme.product_name}}</p>
            <p>{{itme.product_title}}</p>
            <p>
              <span>{{itme.product_selling_price}}元</span>
              <s>{{itme.product_price}}元</s>
            </p>
          </li>
        </ul>
        <ul v-if="$store.state.activeName != 0">
          <li
            v-for="(itme,key) in CategoryListAllData"
            :key="key"
            @click="getDetails(itme.product_id)"
          >
            <img :src="'http://39.100.7.70:81/'+itme.product_picture" alt />
            <p>{{itme.product_name}}</p>
            <p>{{itme.product_title}}</p>
            <p>
              <span>{{itme.product_selling_price}}元</span>
              <s>{{itme.product_price}}元</s>
            </p>
          </li>
        </ul>
      </div>
      <ul v-show="this.search !=''">
        <li
          v-for="(itme,key) in CategoryListAllData"
          :key="key"
          @click="getDetails(itme.product_id)"
        >
          <img :src="'http://39.100.7.70:81/'+itme.product_picture" alt />
          <p>{{itme.product_name}}</p>
          <p>{{itme.product_title}}</p>
          <p>
            <span>{{itme.product_selling_price}}元</span>
            <s>{{itme.product_price}}元</s>
          </p>
        </li>
      </ul>
      <el-pagination
        v-if="this.CategoryListAllData.length>=15 && this.search == ''"
        background
        layout="prev, pager, next"
        :page-size="pageSize"
        :current-page="pagenum"
        @current-change="getNowpage"
        :total="allNum"
      ></el-pagination>
      <el-pagination
        v-if="$store.state.activeName != 0 || this.search != ''"
        background
        layout="prev, pager, next"
        :page-size="pageSize"
        :current-page="pagenum"
        @current-change="getNowpage"
        :total="allnumm"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import Api from "@/api/Classify";
import APPi from "@/api/Search";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  props: {},
  data() {
    //这里存放数据
    return {
      search: "",
      // activeName: 0,
      CategoryList: [], //分类数据列表
      CategoryListAll: [], //全部数据
      CategoryListAllData: [], //全部数据的分页数据
      allNum: 0, //分页器总条数
      allnumm: 0, //分类分页器
      pageSize: 15, //当前条数
      pagenum: 1,
      ProductByCategoryData: [] //后端请求分类商品数据
    };
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    // 点击商品进入商品详情页
    getDetails(id) {
      console.log(id);
      this.$router.push("/details?id=" + id);
    },
    handleClick(tab, event) {
      // console.log(tab, event);
      this.$store.state.activeName = tab.paneName;
      console.log(this.$store.state.activeName);
      this.$router.push(
        "/shopAll/goods?categoryID=" + this.$store.state.activeName
      );
      if (this.$store.state.activeName == 0) {
        this.$router.push("/shopAll");
        this.getAllProduct();
      } else {
        this.getProductByCategory();
      }
    },
    // // 向后端请求分类列表数据
    async getCategoryList() {
      let { data: res } = await Api.getCategoryList();
      console.log(res);
      this.CategoryList = res.category;
    },
    // 向后端请求全部商品数据
    async getAllProduct() {
      let { data: res } = await Api.getAllProduct();
      // console.log(res);
      this.CategoryListAll = res.Product;
      this.allNum = res.total;
  setTimeout(() => {
        this.getProductBySearch()
  }, 5000);
      this.getNowpage(1);
    },
    getNowpage(nowpage) {
      console.log(nowpage);
      var start = (nowpage - 1) * this.pageSize;
      var end = start + this.pageSize; //所有数据
      console.log(start, end);
      this.CategoryListAllData = this.CategoryListAll.slice(start, end);
    },

    // // 后端请求分类商品数据
    async getProductByCategory() {
      let { data: res } = await Api.getProductByCategory({
        categoryID: [this.$route.query.categoryID],
        currentPage: 1,
        pageSize: 15
      });
      console.log(res);
      this.CategoryListAllData = res.Product;
      this.allnumm = res.total;
    },
    //搜索出现的数据
    async getProductBySearch() {
      let { data: res } = await APPi.getProductBySearch({
        search: this.$route.query.search,
        currentPage: 1,
        pageSize: 15
      });
      console.log(res);
      this.CategoryListAllData = res.Product;
    }
  },
  watch: {
    "this.$store.state.activeName"(value) {
      console.log(value);
    },
    //监听路由改变
    $route(value) {
      console.log(value.query);
      if (value.query.search) {
        this.search = value.query.search;
        console.log(this.search);

        this.getProductBySearch();
      }
    }
  },

  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
        this.getProductBySearch();
        this.getAllProduct();
    this.getCategoryList(); //向后端请求分类列表数据
    // 向后端请求分类商品数据

  },

  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {} //生命周期 - 销毁完成
};
</script>
<style lang='scss' scoped>
.el-breadcrumb {
  //   margin-left: 20px;
  margin-top: 20px;
  font-size: 16px;
}
.el-tabs {
  margin-top: 20px;
}
.id {
  width: 100%;
  #card {
    width: 100%;
    height: 100%;
    padding: 0 200px;
  }
}
#data {
  width: 100%;
  background: #f5f5f5;
  padding: 16px 200px;
  ul {
    width: 100%;
    // height: 880px;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    li:hover {
      transition: all 0.2s linear;
      box-shadow: #efefef 40px 40px 40px;
      margin-top: -4px;
      transition: all 0.3s linear;
    }

    li {
      margin-bottom: 20px;
      background: white;
      width: 206px;
      height: 280px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 26px;
      margin-left: 20px;
      &:nth-of-type(1),
      &:nth-of-type(6),
      &:nth-of-type(11) {
        margin-left: 0;
      }
      img {
        width: 100%;
        height: 160px;
      }
      p {
        &:nth-of-type(1) {
          font-size: 13px;
          width: 200px;
          text-align: center;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        &:nth-of-type(2) {
          font-size: 12px;
          color: #b0b0b0;
        }
        &:nth-of-type(3) {
          span {
            &:nth-of-type(1) {
              color: red;
              font-size: 16px;
              margin-right: 10px;
            }
          }
          s {
            color: #b0b0b0;
            font-size: 16px;
          }
        }
      }
    }
  }
}
.el-pagination {
  text-align: center !important;
  margin-top: 20px;
}
</style>